<!DOCTYPE html>
<html>
		<head>
			<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let departments = [];  // 存储学院信息的数组
		
			function init() {
				let xhr = new XMLHttpRequest();
				xhr.open("GET", "majors.json", false);
				xhr.send();
				let data = xhr.responseText; // 以纯文本方式接收JSON
				departments = JSON.parse(data); // 解析JSON数据
		
				let departmentSelect = document.getElementById("department");  // 页面上学院的下拉列表
				let majorSelect = document.getElementById("major");          // 页面上专业的下拉列表

				for (let i = 0; i < departments.length; i++) {
					departmentSelect.options[i] = new Option(departments[i].name);
				}
				loadMajors(departments[0].name);
			}
		
			function loadMajors(departmentName) {
				let majorSelect = document.getElementById("major");  // 页面上专业的下拉列表
				majorSelect.length = 0; // 清空专业的下拉选项
		
				for (let department of departments) {
					if (department.name === departmentName) {
						for (let major of department.majors) {
							majorSelect.options[majorSelect.length] = new Option(major);
						}
						break;
					}
				}
			}
		
			function changeDepartment() {
				let departmentSelect = document.getElementById("department");  // 页面上学院的下拉列表
				let selectedDepartment = departmentSelect.value; // 获取用户选择的学院名称
				loadMajors(selectedDepartment); // 加载对应学院的专业信息
			}
		
			function updateSel() {
				let departmentSelect = document.getElementById("department");  // 页面上学院的下拉列表
				let majorSelect = document.getElementById("major");          // 页面上专业的下拉列表
				let selectedDepartment = departmentSelect.value; // 获取用户选择的学院名称
				let selectedMajor = majorSelect.value; // 获取用户选择的专业名称
		
				let selectedInfo = document.getElementById("selectedInfo"); // 页面上显示所选信息的元素
				selectedInfo.textContent = `${selectedDepartment}学院${selectedMajor}`;
			}
		</script>
	</head>
	<body onload="init()">
		<h2>学院和专业</h2>
		<label for="department">学院：</label>
		<select id="department" onchange="changeDepartment()">
		</select>
		<label for="major">专业：</label>
		<select id="major" onchange="updateSel()">
		</select>
		<p style="color: blue;">所选专业：<span id="selectedInfo"></span></p>
	</body>
</html>